<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物流配送</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-cyan-600 to-blue-600 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-profile.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">物流配送</h1>
                <button onclick="addShippingPartner()" class="text-white hover:opacity-80">
                    <i class="fas fa-plus text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Delivery Status Card -->
        <div class="px-4 py-3 bg-gradient-to-r from-cyan-600 to-blue-600">
            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4">
                <div class="flex items-center text-white">
                    <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-shipping-fast text-xl"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="font-bold text-lg">配送服务</h3>
                        <div class="flex items-center mt-1">
                            <span class="bg-green-500 text-xs px-2 py-1 rounded-full mr-2">正常运营</span>
                            <span class="text-xs opacity-80">今日发货: 126单</span>
                        </div>
                    </div>
                    <div class="text-right">
                        <p class="text-xs opacity-80">平均时效</p>
                        <p class="text-lg font-semibold">2.3天</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Scrollable Content -->
        <div class="h-[calc(852px-220px)] overflow-y-auto pb-20">
            <!-- Shipping Partners -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center justify-between">
                    <span class="flex items-center">
                        <span class="w-1 h-4 bg-cyan-600 mr-2 rounded-full"></span>
                        物流合作商
                    </span>
                    <span onclick="addShippingPartner()" class="text-cyan-600 text-xs cursor-pointer hover:text-cyan-700">
                        <i class="fas fa-plus mr-1"></i>添加合作商
                    </span>
                </h3>
                <div class="space-y-3">
                    <!-- SF Express -->
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center">
                                <div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center mr-3">
                                    <i class="fas fa-shipping-fast text-orange-600 text-lg"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium">顺丰速运</p>
                                    <p class="text-xs text-gray-500">优先推荐，时效最快</p>
                                </div>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" checked class="sr-only peer">
                                <div class="w-9 h-5 bg-gray-200 rounded-full peer peer-checked:bg-green-500 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"></div>
                            </label>
                        </div>
                        <div class="grid grid-cols-3 gap-2 text-xs">
                            <div class="text-center">
                                <p class="text-gray-500">时效</p>
                                <p class="font-medium text-orange-600">1-2天</p>
                            </div>
                            <div class="text-center">
                                <p class="text-gray-500">费率</p>
                                <p class="font-medium">12元起</p>
                            </div>
                            <div class="text-center">
                                <p class="text-gray-500">覆盖</p>
                                <p class="font-medium">全国</p>
                            </div>
                        </div>
                        <button onclick="configurePartner('sf')" class="w-full bg-orange-50 text-orange-600 text-sm py-2 rounded-lg mt-3 hover:bg-orange-100 transition-colors">
                            配置设置
                        </button>
                    </div>

                    <!-- YTO Express -->
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center">
                                <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                                    <i class="fas fa-truck text-blue-600 text-lg"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium">圆通速递</p>
                                    <p class="text-xs text-gray-500">性价比高，覆盖广</p>
                                </div>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" checked class="sr-only peer">
                                <div class="w-9 h-5 bg-gray-200 rounded-full peer peer-checked:bg-green-500 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"></div>
                            </label>
                        </div>
                        <div class="grid grid-cols-3 gap-2 text-xs">
                            <div class="text-center">
                                <p class="text-gray-500">时效</p>
                                <p class="font-medium text-blue-600">2-3天</p>
                            </div>
                            <div class="text-center">
                                <p class="text-gray-500">费率</p>
                                <p class="font-medium">8元起</p>
                            </div>
                            <div class="text-center">
                                <p class="text-gray-500">覆盖</p>
                                <p class="font-medium">全国</p>
                            </div>
                        </div>
                        <button onclick="configurePartner('yto')" class="w-full bg-blue-50 text-blue-600 text-sm py-2 rounded-lg mt-3 hover:bg-blue-100 transition-colors">
                            配置设置
                        </button>
                    </div>

                    <!-- EMS -->
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center">
                                <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
                                    <i class="fas fa-mail-bulk text-green-600 text-lg"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium">EMS邮政</p>
                                    <p class="text-xs text-gray-500">偏远地区可达</p>
                                </div>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" class="sr-only peer">
                                <div class="w-9 h-5 bg-gray-200 rounded-full peer peer-checked:bg-green-500 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"></div>
                            </label>
                        </div>
                        <div class="grid grid-cols-3 gap-2 text-xs">
                            <div class="text-center">
                                <p class="text-gray-500">时效</p>
                                <p class="font-medium text-green-600">3-5天</p>
                            </div>
                            <div class="text-center">
                                <p class="text-gray-500">费率</p>
                                <p class="font-medium">15元起</p>
                            </div>
                            <div class="text-center">
                                <p class="text-gray-500">覆盖</p>
                                <p class="font-medium">全覆盖</p>
                            </div>
                        </div>
                        <button onclick="configurePartner('ems')" class="w-full bg-green-50 text-green-600 text-sm py-2 rounded-lg mt-3 hover:bg-green-100 transition-colors">
                            配置设置
                        </button>
                    </div>
                </div>
            </div>

            <!-- Shipping Templates -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center justify-between">
                    <span class="flex items-center">
                        <span class="w-1 h-4 bg-cyan-600 mr-2 rounded-full"></span>
                        运费模板
                    </span>
                    <button onclick="createTemplate()" class="text-cyan-600 text-xs hover:text-cyan-700">
                        <i class="fas fa-plus mr-1"></i>新建模板
                    </button>
                </h3>
                <div class="space-y-3">
                    <!-- Default Template -->
                    <div class="bg-white rounded-lg border-2 border-blue-200 p-3">
                        <div class="flex items-center justify-between mb-2">
                            <div>
                                <p class="text-sm font-medium">默认运费模板</p>
                                <p class="text-xs text-gray-500">全国统一运费，数码产品专用</p>
                            </div>
                            <span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded-full">默认</span>
                        </div>
                        <div class="grid grid-cols-2 gap-3 text-sm">
                            <div>
                                <p class="text-gray-500 text-xs">首重费用</p>
                                <p class="font-medium">¥12 (1kg内)</p>
                            </div>
                            <div>
                                <p class="text-gray-500 text-xs">续重费用</p>
                                <p class="font-medium">¥5 (每增加1kg)</p>
                            </div>
                        </div>
                        <div class="flex space-x-2 mt-3">
                            <button onclick="editTemplate('default')" class="flex-1 bg-blue-50 text-blue-600 text-xs py-2 rounded-lg hover:bg-blue-100 transition-colors">
                                编辑模板
                            </button>
                            <button onclick="viewTemplate('default')" class="bg-gray-50 text-gray-600 text-xs px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors">
                                查看
                            </button>
                        </div>
                    </div>

                    <!-- Free Shipping Template -->
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center justify-between mb-2">
                            <div>
                                <p class="text-sm font-medium">满额包邮模板</p>
                                <p class="text-xs text-gray-500">满99元包邮，促销活动专用</p>
                            </div>
                            <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">促销</span>
                        </div>
                        <div class="grid grid-cols-2 gap-3 text-sm">
                            <div>
                                <p class="text-gray-500 text-xs">包邮门槛</p>
                                <p class="font-medium">¥99</p>
                            </div>
                            <div>
                                <p class="text-gray-500 text-xs">不满条件</p>
                                <p class="font-medium">¥8运费</p>
                            </div>
                        </div>
                        <div class="flex space-x-2 mt-3">
                            <button onclick="editTemplate('free')" class="flex-1 bg-green-50 text-green-600 text-xs py-2 rounded-lg hover:bg-green-100 transition-colors">
                                编辑模板
                            </button>
                            <button onclick="viewTemplate('free')" class="bg-gray-50 text-gray-600 text-xs px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors">
                                查看
                            </button>
                        </div>
                    </div>

                    <!-- Heavy Items Template -->
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center justify-between mb-2">
                            <div>
                                <p class="text-sm font-medium">大件商品模板</p>
                                <p class="text-xs text-gray-500">电视、冰箱等大件商品专用</p>
                            </div>
                            <span class="bg-orange-100 text-orange-600 text-xs px-2 py-1 rounded-full">大件</span>
                        </div>
                        <div class="grid grid-cols-2 gap-3 text-sm">
                            <div>
                                <p class="text-gray-500 text-xs">配送费用</p>
                                <p class="font-medium">¥50起</p>
                            </div>
                            <div>
                                <p class="text-gray-500 text-xs">配送方式</p>
                                <p class="font-medium">专车配送</p>
                            </div>
                        </div>
                        <div class="flex space-x-2 mt-3">
                            <button onclick="editTemplate('heavy')" class="flex-1 bg-orange-50 text-orange-600 text-xs py-2 rounded-lg hover:bg-orange-100 transition-colors">
                                编辑模板
                            </button>
                            <button onclick="viewTemplate('heavy')" class="bg-gray-50 text-gray-600 text-xs px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors">
                                查看
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Shipping Areas -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-cyan-600 mr-2 rounded-full"></span>
                    配送范围
                </h3>
                <div class="space-y-3">
                    <!-- Coverage Map -->
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center justify-between mb-3">
                            <span class="text-sm font-medium">配送区域</span>
                            <button onclick="manageAreas()" class="text-cyan-600 text-xs hover:text-cyan-700">管理区域</button>
                        </div>
                        <div class="grid grid-cols-2 gap-2 text-xs">
                            <div class="flex items-center justify-between">
                                <span>华北地区</span>
                                <span class="bg-green-100 text-green-600 px-2 py-1 rounded-full">可配送</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span>华东地区</span>
                                <span class="bg-green-100 text-green-600 px-2 py-1 rounded-full">可配送</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span>华南地区</span>
                                <span class="bg-green-100 text-green-600 px-2 py-1 rounded-full">可配送</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span>西北地区</span>
                                <span class="bg-orange-100 text-orange-600 px-2 py-1 rounded-full">部分可达</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span>西南地区</span>
                                <span class="bg-green-100 text-green-600 px-2 py-1 rounded-full">可配送</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span>东北地区</span>
                                <span class="bg-green-100 text-green-600 px-2 py-1 rounded-full">可配送</span>
                            </div>
                        </div>
                    </div>

                    <!-- Special Areas -->
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <p class="text-sm font-medium mb-2">特殊配送区域</p>
                        <div class="space-y-2 text-xs">
                            <div class="flex items-center justify-between">
                                <span class="text-gray-600">港澳台地区</span>
                                <span class="bg-red-100 text-red-600 px-2 py-1 rounded-full">暂不支持</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-gray-600">新疆、西藏</span>
                                <span class="bg-orange-100 text-orange-600 px-2 py-1 rounded-full">需要咨询</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-gray-600">海外地区</span>
                                <span class="bg-red-100 text-red-600 px-2 py-1 rounded-full">暂不支持</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Warehouse Management -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center justify-between">
                    <span class="flex items-center">
                        <span class="w-1 h-4 bg-cyan-600 mr-2 rounded-full"></span>
                        发货仓库
                    </span>
                    <button onclick="addWarehouse()" class="text-cyan-600 text-xs hover:text-cyan-700">
                        <i class="fas fa-plus mr-1"></i>添加仓库
                    </button>
                </h3>
                <div class="space-y-3">
                    <!-- Main Warehouse -->
                    <div class="bg-white rounded-lg border-2 border-green-200 p-3">
                        <div class="flex items-center justify-between mb-2">
                            <div>
                                <p class="text-sm font-medium">北京总仓</p>
                                <p class="text-xs text-gray-500">北京市朝阳区建国路88号</p>
                            </div>
                            <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">主仓库</span>
                        </div>
                        <div class="grid grid-cols-3 gap-2 text-xs">
                            <div class="text-center">
                                <p class="text-gray-500">库存</p>
                                <p class="font-medium text-green-600">8,563件</p>
                            </div>
                            <div class="text-center">
                                <p class="text-gray-500">今日出库</p>
                                <p class="font-medium">126件</p>
                            </div>
                            <div class="text-center">
                                <p class="text-gray-500">状态</p>
                                <p class="font-medium text-green-600">正常</p>
                            </div>
                        </div>
                        <button onclick="manageWarehouse('main')" class="w-full bg-green-50 text-green-600 text-sm py-2 rounded-lg mt-3 hover:bg-green-100 transition-colors">
                            管理仓库
                        </button>
                    </div>

                    <!-- Branch Warehouse -->
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center justify-between mb-2">
                            <div>
                                <p class="text-sm font-medium">上海分仓</p>
                                <p class="text-xs text-gray-500">上海市浦东新区张江路123号</p>
                            </div>
                            <span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded-full">分仓库</span>
                        </div>
                        <div class="grid grid-cols-3 gap-2 text-xs">
                            <div class="text-center">
                                <p class="text-gray-500">库存</p>
                                <p class="font-medium text-blue-600">3,254件</p>
                            </div>
                            <div class="text-center">
                                <p class="text-gray-500">今日出库</p>
                                <p class="font-medium">68件</p>
                            </div>
                            <div class="text-center">
                                <p class="text-gray-500">状态</p>
                                <p class="font-medium text-green-600">正常</p>
                            </div>
                        </div>
                        <button onclick="manageWarehouse('shanghai')" class="w-full bg-blue-50 text-blue-600 text-sm py-2 rounded-lg mt-3 hover:bg-blue-100 transition-colors">
                            管理仓库
                        </button>
                    </div>
                </div>
            </div>

            <!-- Delivery Statistics -->
            <div class="p-4 pb-8">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-cyan-600 mr-2 rounded-full"></span>
                    配送数据
                </h3>
                <div class="grid grid-cols-2 gap-3">
                    <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-3 border border-blue-200 text-center">
                        <i class="fas fa-shipping-fast text-blue-600 text-lg mb-2"></i>
                        <p class="text-xs text-gray-600">今日发货</p>
                        <p class="text-xl font-bold text-blue-600">126</p>
                        <p class="text-xs text-green-600 mt-1">
                            <i class="fas fa-arrow-up text-xs mr-1"></i>+12%
                        </p>
                    </div>
                    <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-3 border border-green-200 text-center">
                        <i class="fas fa-clock text-green-600 text-lg mb-2"></i>
                        <p class="text-xs text-gray-600">平均时效</p>
                        <p class="text-xl font-bold text-green-600">2.3天</p>
                        <p class="text-xs text-green-600 mt-1">较上月快0.2天</p>
                    </div>
                    <div class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl p-3 border border-orange-200 text-center">
                        <i class="fas fa-percentage text-orange-600 text-lg mb-2"></i>
                        <p class="text-xs text-gray-600">签收率</p>
                        <p class="text-xl font-bold text-orange-600">97.5%</p>
                        <p class="text-xs text-gray-500 mt-1">近30天</p>
                    </div>
                    <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-3 border border-purple-200 text-center">
                        <i class="fas fa-exclamation-triangle text-purple-600 text-lg mb-2"></i>
                        <p class="text-xs text-gray-600">异常件</p>
                        <p class="text-xl font-bold text-purple-600">3</p>
                        <p class="text-xs text-red-600 mt-1">需要处理</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Action Bar -->
        <div class="absolute bottom-1 left-0 right-0 bg-white border-t border-gray-200 px-4 py-3 shadow-lg">
            <div class="flex space-x-3">
                <button onclick="viewShippingReport()" class="flex-1 bg-cyan-600 text-white font-medium py-2.5 rounded-lg hover:bg-cyan-700 transition-colors">
                    <i class="fas fa-chart-line mr-2"></i>配送报表
                </button>
                <button onclick="bulkShipping()" class="bg-gray-100 text-gray-700 font-medium px-4 py-2.5 rounded-lg hover:bg-gray-200 transition-colors">
                    <i class="fas fa-boxes"></i>
                </button>
            </div>
        </div>
    </div>

    <script>
        // Add shipping partner
        function addShippingPartner() {
            window.location.href = 'b2b-add-shipping-partner.html';
        }

        // Configure partner
        function configurePartner(partnerId) {
            window.location.href = `b2b-configure-partner.html?partner=${partnerId}`;
        }

        // Template management
        function createTemplate() {
            window.location.href = 'b2b-create-shipping-template.html';
        }

        function editTemplate(templateId) {
            window.location.href = `b2b-edit-shipping-template.html?template=${templateId}`;
        }

        function viewTemplate(templateId) {
            window.location.href = `b2b-view-shipping-template.html?template=${templateId}`;
        }

        // Area management
        function manageAreas() {
            window.location.href = 'b2b-shipping-areas.html';
        }

        // Warehouse management
        function addWarehouse() {
            window.location.href = 'b2b-add-warehouse.html';
        }

        function manageWarehouse(warehouseId) {
            window.location.href = `b2b-warehouse-detail.html?warehouse=${warehouseId}`;
        }

        // Reports
        function viewShippingReport() {
            window.location.href = 'b2b-shipping-report.html';
        }

        function bulkShipping() {
            window.location.href = 'b2b-bulk-shipping.html';
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            showToast('物流配送设置已加载');
        });
    </script>
</body>
</html>